<template>
  <view>
    <!-- 搜索框组件 -->
    <view class="my-search" @click="clickSearch">

      <search></search>
      <image src="../../static/image/favicon.ico"></image>
    </view>
    <!-- 轮播图区域 -->
    <view class="bannerContainer">
      <swiper class="banners" indicator-dots indicator-color="#e6e6e6" indicator-active-color="#ec4141" autoplay
        circular>
        <swiper-item v-for="(item, i) in swiperList" :key="i" v-if="item">
          <image :src="item.pic"></image>
        </swiper-item>
      </swiper>
    </view>
    <!-- 五个图标导航区域 -->
    <view class="navContainer">
      <view class="navItem">
        <image src="../../static/image/tabs/今日推荐.png"></image>
        <text>每日推荐</text>
      </view>
      <view class="navItem">
        <image src="../../static/image/tabs/播放歌单.png"></image>
        <text>歌单</text>
      </view>
      <view class="navItem">
        <image src="../../static/image/tabs/排行榜.png"></image>
        <text>排行榜</text>
      </view>
      <view class="navItem">
        <image src="../../static/image/tabs/电视直播.png"></image>
        <text>直播</text>
      </view>
    </view>
    <!-- 推荐歌曲区域 -->
    <view class="recommendContainer" v-if="personalized">
      <!-- 头部区域 -->
      <view title="推荐歌单">推荐歌单</view>
      <!-- 内容区域 -->
      <scroll-view class="recommendScroll" enable-flex scroll-x enhanced show-scrollbar="false">
        <navigator class="scrollItem" v-for="(item,i) in personalized" :key='i'
          :url="'/subpkg/item_MusicList/item_MusicList?personalized_id='+item.id">
          <image :src="item.picUrl"></image>
          <view class="palyCount">
            <uni-icons type="videocam" color="white" size="21"></uni-icons>
            {{getPlayCount(item.playCount)}}
          </view>
          <text>{{item.name}}</text>
        </navigator>
      </scroll-view>
    </view>
    <!-- 排行榜区域 -->
    <view class="topList">
      <!-- 头部区域 -->
      <view title="排行榜">排行榜</view>
      <swiper class="topListSwiper" circular next-margin="60rpx" autoplay>
        <swiper-item v-for="(list,index) in topListSongDetail" :key="index">
          <view class="swiperItem">
            <view class="title">{{list.name}}</view>
            <view class="musicItem" v-for="(track,i) in list.tracks" data-song="track.id" :key="i">
              <image :src="track.al.picUrl"></image>
              <text class="count">{{i+1}}</text>
              <text class="musicName">{{track.name}}</text>
              <view class="fenge">-</view>
              <text class="authorName">{{track.ar[0].name}}</text>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 轮播数据
        swiperList: [],
        // 获取推荐歌单数据
        personalized: [],
        // 排行榜
        topList: [],
        //  歌单详情的所有目录
        allSongDetailDate: [],
        // 利用排行榜的id获取道歌单的详情数据
        topListSongDetail: []
      };

    },
    onLoad() {
      // 获取轮播数据
      this.getSwiptList()
      // 获取推荐歌单
      this.getPersonalized()
      // 获取排行榜
      this.getTopList()


    },
    methods: {
      // 点击跳转到搜索页面
      clickSearch() {
        uni.navigateTo({
          url: '/subpkg/my_search/my_search'
        })
      },
      // 获取轮播数据
      async getSwiptList() {
        const {
          data: res
        } = await uni.$http.get('/banner?type=2')
        // console.log(res)
        if (!res.banners.length) {
          return uni.$showMsg()
        }
        this.swiperList = res.banners
      },
      // 获取推荐歌单数据/personalized?limit=1
      async getPersonalized() {
        const {
          data: res
        } = await uni.$http.get('/personalized?limit=15')
        // console.log(res)
        if (res.code !== 200) {
          return uni.$showMsg()
        }
        this.personalized = res.result
      },
      // 获取排行榜数据
      async getTopList() {
        const {
          data: res
        } = await uni.$http.get('/topList')
        // console.log(res)
        // 截取10个TOP列表
        const topList = res.list
        this.topList = topList.splice(-20)
        // console.log(this.topList) 
        // 获取歌单详情
        this.songDetail()
      },
      // 获取歌单详情,利用toplist的id数据
      async songDetail() {
        for (let a = 0; a < this.topList.length; a++) {
          const songDetailDate = await uni.$http.get('/playlist/detail', {
            id: this.topList[a].id
          })
          // console.log(songDetailDate)
          // 获取歌单详情的所有目录
          this.allSongDetailDate.push(songDetailDate.data.playlist.tracks)
          // 获取排行榜列表里面的歌单详情数据(例如：歌名，歌手名字，id ) al ar
          const listItem = {
            name: songDetailDate.data.playlist.name,
            id: songDetailDate.data.playlist.id,
            tracks: songDetailDate.data.playlist.tracks.slice(0, 5)
          }
          this.topListSongDetail.push(listItem)
        }
      },
      // 获取播放量
      getPlayCount(num) {
        if (num > 100000000) {
          return (num / 100000000).toFixed(1) + '亿'
        }
        if (10000 < num < 100000000) {
          return (num / 100000).toFixed(1) + '万'
        }
      },


    }
  }
</script>

<style>
  /* 搜索 */
  .my-search {
    margin: auto;
    position: relative;
    /* 设置定位效果为“吸顶” */
    position: sticky;
    /* // 吸顶的“位置” */
    top: 0;
    /* // 提高层级，防止被轮播图覆盖 */
    z-index: 999;
  }

  .my-search image {
    height: 60rpx;
    width: 60rpx;
    position: absolute;
    right: 32rpx;
    top: 32rpx
  }

  /* 轮播图 */
  .bannerContainer {
    display: flex;
    justify-content: center;
    background-color: #fff;
  }

  .banners {
    width: 92%;
    height: 300rpx;
    border-radius: 15rpx;
    overflow: hidden;
  }

  .banners image {
    width: 100%;
    height: 100%;
  }

  /* 图标导航区域 */
  .navContainer {
    background-color: #fff;
    padding: 20rpx 30rpx 25rpx 20rpx;
    display: flex;
    justify-content: space-around;
    margin-top: 30rpx;

    border-bottom: 1px solid #e7e7e7;
  }

  .navItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 20%;
  }

  .navItem image {
    width: 80rpx;
    height: 80rpx;
    text-align: center;
    line-height: 100rpx;
    font-size: 44rpx;
  }

  .navItem text {
    margin-top: 10rpx;
    font-size: 25rpx;
  }

  /* 推荐歌曲 */
  .recommendContainer {
    margin: 2rpx 0 20rpx;
    padding: 30rpx 40rpx;
    background-color: #fff;
    border-bottom-left-radius: 20rpx;
    border-bottom-right-radius: 20rpx;
    border-bottom: 1px solid #e7e7e7;
  }

  /* 推荐内容区域 */
  .recommendScroll {
    display: flex;
    /* scroll虽然设置了横向排列，但是高度仍按纵向计算了，所以设置一个高度解决问题 */
    height: 320rpx;
  }

  .scrollItem {
    margin-top: 30rpx;
    width: 200rpx;
    margin-right: 20rpx;
    position: relative;
  }

  .scrollItem .palyCount {
    font-size: 22rpx;
    display: flex;
    align-items: center;
    position: absolute;
    top: 0px;
    right: 5px;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.4);

    /* opacity: 0.6; */
    border-radius: 15rpx;
  }

  .scrollItem image {
    box-sizing: content-box;
    width: 200rpx;
    height: 200rpx;
    box-shadow: 0rpx -22rpx 5rpx -14rpx #ddd;
    border-radius: 20rpx;
  }

  .scrollItem text {
    font-size: 26rpx;
    /* 多行文本溢出隐藏，省略号代替 */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    /* 设置对齐模式 */
    -webkit-box-orient: vertical;
    /* 设置盒子的行数 */
    -webkit-line-clamp: 2;
  }

  /* 排行榜 */
  .topList {
    padding: 30rpx 40rpx 0;
    margin-top: 20rpx;
    margin-bottom: 45rpx;
    background-color: white;
    border-radius: 20rpx;
    /* height: 600rpx; */
  }

  .topListSwiper {
    margin-top: 30rpx;
    height: 700rpx;
    /* padding: 0 0 40rpx 40rpx; */
  }

  .swiperItem {
    width: 96%;

  }

  .swiperItem .title {
    font-size: 30rpx;
    line-height: 80rpx;
    /* 多行文本溢出隐藏，省略号代替 */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    /* 设置对齐模式 */
    -webkit-box-orient: vertical;
    /* 设置盒子的行数 */
    -webkit-line-clamp: 1;
  }

  .musicItem {
    display: flex;
    margin-bottom: 20rpx;
  }

  .musicItem image {
    width: 100rpx;
    height: 100rpx;
    border-radius: 12rpx;
    border: 1rpx solid #eee;
  }

  .musicItem .count {
    width: 100rpx;
    height: 100rpx;
    text-align: center;
    line-height: 100rpx;
  }

  .musicName {
    height: 100rpx;
    line-height: 100rpx;
    max-width: 30vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .authorName {
    font-size: 24rpx;
    color: #787677;
    height: 100rpx;
    line-height: 109rpx;
    max-width: 20vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .fenge {
    font-size: 24rpx;
    color: #787677;
    height: 100rpx;
    line-height: 109rpx;
    margin: 0 5rpx;
  }

  .bottomControl {
    position: fixed;
    display: flex;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8vh;
    border-top: 1rpx solid #ddd;
    background-color: white;
  }

  .bottomControl .cover {
    position: absolute;
    top: 0%;
    left: 30rpx;
    height: 8vh;
    width: 8vh;
  }

  .bottomControl .disc {
    height: 100%;
    width: 100%;
  }

  .bottomControl .musicCover {
    width: 70%;
    height: 70%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
  }

  .bottomControl .musicInfo {
    margin-left: calc(9vh + 30rpx);
    height: 100%;
  }

  .bottomControl .musicInfo text {
    line-height: 8vh;
  }

  .controlButton {
    position: absolute;
    right: 30rpx;
  }

  .controlButton text {
    font-size: 60rpx;
    color: #323232;
    line-height: 8vh;
  }

  .icon-iconsMusicyemianbofangmoshiPlayList {
    margin-left: 25rpx;
  }

  .bottomControlSwiper {
    position: absolute;
    top: 0%;
    left: 0;
    height: 20vh;
    width: 75%;
    /* overflow: none; */
  }

  /* .bottomControlSwiperItem{
  
  } */

  .header {
    display: flex;
    background-color: #fff;
  }


  .header .search {
    border: 1rpx solid #eee;
    /* flex-grow 可拉伸   */
    /* flex-shrink 可压缩   */
    /* flex-basis 当前元素的宽度   */
    /* flex默认值: flex-grow:0,flex-shrink:1,flex-basis:auto */
    /* flex:1代表 flex-grow:1,flex-shrink:1,flex-basis:0% */
    /* flex:auto代表 flex-grow:1,flex-shrink:1,flex-basis:auto */
    /* flex: 1会导致父元素宽度自动为100% */
    flex: 1;
    margin: 20rpx 50rpx 0;
    height: 60rpx;
    font-size: 26rpx;
    text-align: center;
    line-height: 60rpx;
    color: #939594;
    background-color: #edefee;
    border-radius: 30rpx;
  }
</style>
